import $ from 'jquery'

$(function(){
    $(document).on('click',".top-bottom",function(){
        let DOMHeight = document.documentElement.scrollHeight
        if(document.documentElement.scrollTop<DOMHeight/3){
            $('body,html').stop().animate({ scrollTop: DOMHeight }, 800);
        }else {
            $('body,html').stop().animate({ scrollTop: 0 }, 800);
        }
        
    })
    $(document).on('click',".header-btn",function(){
        let HeaderHeight = document.getElementsByTagName("header")[0].clientHeight
        $('body,html').stop().animate({ scrollTop: HeaderHeight }, 800);
    })
})


window.addEventListener("load",function(){
    const btn = document.getElementsByClassName("top-bottom")[0]
    const goTop = document.getElementsByClassName("goTop")[0]
    const goBottom = document.getElementsByClassName("goBottom")[0]
    const Nav = document.getElementsByTagName("header")[0].getElementsByTagName("nav")[0]
    window.addEventListener('scroll',function(){
        let DOMHeight = document.documentElement.scrollHeight
        if (document.documentElement.scrollTop>Nav.scrollHeight) {
            Nav.classList.add("nav")
        }else{
            Nav.classList.remove("nav")
        }
        if (DOMHeight>1000) {
            if(document.documentElement.scrollTop>50){
                btn.style.display="block"
            }else {
                btn.style.display="none"
            }
            if(document.documentElement.scrollTop<DOMHeight/5){
                goBottom.style.display="block"
                goTop.style.display="none"
            }else{
                goBottom.style.display="none"
                goTop.style.display="block"
            }
        }
    })
})